<template>
  <div class="tool-preview">
    <div class="preview-header">
      <h3>预览效果</h3>
    </div>
    <div class="preview-content">
      <div id="preview-result" ref="previewElement">
        <slot>
          <!-- 默认内容 -->
          <div v-if="Object.keys(previewData).length > 0" class="preview-data">
            <div v-for="(value, key) in previewData" :key="key" class="preview-item">
              <span class="preview-label">{{ formatLabel(key) }}:</span>
              <span class="preview-value">{{ value }}</span>
            </div>
          </div>
          <div v-else class="preview-placeholder">
            {{ placeholder || '暂无预览内容' }}
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue';

const props = defineProps({
  previewData: {
    type: Object,
    default: () => ({})
  },
  placeholder: {
    type: String,
    default: '暂无预览内容'
  }
});

const previewElement = ref(null);

// 格式化标签文本
const formatLabel = (key) => {
  return key
    .replace(/([A-Z])/g, ' $1')
    .split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');
};
</script>

<style scoped>
.tool-preview {
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  margin-top: 20px;
  overflow: hidden;
}

.preview-header {
  padding: 15px;
  background-color: var(--primary-light);
  color: var(--white);
}

.preview-header h3 {
  margin: 0;
  font-size: 18px;
}

.preview-content {
  padding: 20px;
  min-height: 200px;
}

#preview-result {
  border: 1px dashed var(--medium-gray);
  padding: 15px;
  border-radius: var(--border-radius-sm);
  min-height: 100px;
}

.preview-placeholder {
  color: var(--dark-gray);
  text-align: center;
  padding: 40px 0;
  font-style: italic;
}

.preview-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--light-gray);
}

.preview-label {
  font-weight: bold;
  color: var(--primary-dark);
}

.preview-value {
  color: var(--black);
}
</style> 